<template>
	<div class="group-management-container">
		<el-tabs v-model="activeName" @tab-click="handleClick">
			<el-tab-pane label="黑名单分组管理" name="blacklistGroupManagement">
				<SearchGroup @searchData="searchDataGroup" class="search-group" />
				<el-button type="primary" class="add-btn" @click="addGroup">添加分组</el-button>
				<Table :tableData="tableData" :tooltipEffect="'dark'">
					<template v-slot:hidden>
						<el-table-column width="250px" align="center" prop="callRejection" label="来电拒接提示语" :show-overflow-tooltip="true">
							<template slot-scope="scope">
								<span>{{ scope.row.callRejection }}</span>
							</template>
						</el-table-column>
					</template>
					<template v-slot:btn>
						<el-table-column width="250px" align="center" label="操作">
							<template slot-scope="scope">
								<el-button size="mini" class="edit-btn" @click="editGroup(scope.row)">修改</el-button>
								<el-button size="mini" class="delete-btn" @click="deleteGroup(scope.row)" type="danger">删除</el-button>
							</template>
						</el-table-column>
					</template>
				</Table>
				<PageSize :pages="searchData" @changePageSize="changeGroupPageSize" @changeCurrentPage="changeGroupCurrentPage" class="page" />
			</el-tab-pane>
		</el-tabs>
		<!-- 添加分组 -->
		<AddGroup v-if="showAddGroupDialog" :dialogVisible="showAddGroupDialog" :title="title" :groupList="tableData.tableConent" @closeGroup="closeAddGroup" @sureGroup="sureAddGroup" />
		<!-- 修改分组 -->
		<AddGroup
			v-if="showEditGroupDialog"
			:dialogVisible="showEditGroupDialog"
			:title="title"
			:groupList="tableData.tableConent"
			:editGroupData="editGroupData"
			@closeGroup="closeEditGroup"
			@sureGroup="sureEditGroup"
		/>
	</div>
</template>

<script>
import SearchGroup from './SearchGroup.vue';
import Table from '@/views/components/Table.vue';
import PageSize from '@/views/components/PageSize.vue';
import AddGroup from './AddGroup.vue';
import { getBanGroupList, addBanGroup, updateBanGroup, delBanGroup, checkBandGroup } from '@/api/api';
export default {
	name: '',
	components: {
		SearchGroup,
		Table,
		PageSize,
		AddGroup
	},
	props: {},
	data() {
		return {
			activeName: 'blacklistGroupManagement',
			tableData: {
				sort: false,
				tableHead: [
					{
						label: '黑名单分组',
						prop: 'groupName'
					},
					{
						label: '添加时间',
						prop: 'createdAt'
					}
				],
				tableConent: [],
				showIndex: false,
				showCheck: false
			},
			// 条件搜索
			searchData: {
				createdAtStart: '',
				createdAtEnd: '',
				title: '',
				page: 1,
				pageSize: 10,
				total: 0
			},
			showAddGroupDialog: false, //是否显示添加分组弹框
			showEditGroupDialog: false, //是否显示修改黑名单分组弹框
			// 修改黑名单分组数据
			editGroupData: {
				groupName: '',
				callRejection: '' // 修改绑定的分组id
			},
			editGroupId: 0
		};
	},
	mounted() {
		this.initBlacklistGroupManagement();
	},
	methods: {
		/**
		 * 检索
		 * @param {*} form
		 */
		searchDataGroup(form) {
			console.log('searchDataGroup', form);
			this.searchData.createdAtStart = form.createdAtStart;
			this.searchData.createdAtEnd = form.createdAtEnd;
			this.searchData.title = encodeURIComponent(form.title);
			this.searchData.page = 1;
			this.searchData.pageSize = 10;
			this.initBlacklistGroupManagement();
		},
		// 添加分组 相关方法
		addGroup() {
			this.title = '添加分组';
			this.showAddGroupDialog = true;
		},
		closeAddGroup() {
			this.showAddGroupDialog = false;
		},
		/**
		 *点击确定按钮提交添加分组
		 * @param {*} form
		 */
		async sureAddGroup(form) {
			console.log(form, 'sureAddGroup');
			try {
				let params = {
					title: form.groupName,
					msg: form.callRejection
				};
				const { data } = await addBanGroup(params);
				console.log(data);
				this.showAddGroupDialog = false;
				this.$message.success('分组添加成功');
				this.initBlacklistGroupManagement();
			} catch (error) {
				console.log(error);
				this.$message.error('分组添加失败！');
			}
		},
		// 修改
		editGroup(row) {
			console.log('editGroup', row);
			this.editGroupData.groupName = row.groupName;
			this.editGroupData.callRejection = row.callRejection;
			this.editGroupId = row.id;
			this.title = '修改分组';
			this.showEditGroupDialog = true;
		},
		closeEditGroup() {
			this.showEditGroupDialog = false;
		},
		/**
		 *点击确定按钮提交修改分组
		 * @param {*} form
		 * @param {*} oldForm
		 */
		async sureEditGroup(form, oldForm) {
			console.log(form, 'sureEditGroup', oldForm);
			try {
				let params = {};
				// 修改的时候过滤参数
				if (form.groupName === oldForm.groupName) {
					params.msg = form.callRejection;
				} else if (form.groupName !== oldForm.groupName && form.callRejection !== oldForm.callRejection) {
					params.title = form.groupName;
					params.msg = form.callRejection;
				} else {
					params.title = form.groupName;
				}

				console.log(params, 'params');
				const { data } = await updateBanGroup(this.editGroupId, params);
				console.log(data);
				this.showEditGroupDialog = false;
				this.$message.success('分组修改成功');
				this.initBlacklistGroupManagement();
			} catch (error) {
				console.log(error);
				this.$message.error('分组修改失败！');
			}
		},
		// 删除分组
		deleteGroup(row) {
			console.log('deleteGroup', row);
			checkBandGroup(row.id)
				.then(res => {
					console.log(res.data);
					if (res.data.used === true) {
						this.$confirm(`存在绑定该黑名单分组用户，无法进行删除！`, '提示', {
							confirmButtonText: '确定',
							cancelButtonText: '取消',
							type: 'warning',
							showCancelButton: false
						})
							.then(() => {})
							.catch(err => {
								console.log(err);
							});
					} else {
						this.$confirm(`确定要删除分组<${row.groupName}>吗? 是否继续?`, '提示', {
							confirmButtonText: '确认删除',
							cancelButtonText: '取消',
							type: 'warning'
						})
							.then(() => {
								delBanGroup(row.id)
									.then(res => {
										console.log(res.data);
										if (res.data.success === true) {
											this.$message.success('删除成功！');
											this.initBlacklistGroupManagement();
										} else {
											console.log('deleteGroup error', res.data);
										}
									})
									.catch(error => {
										console.log(error);
									});
							})
							.catch(err => {
								console.log(err);
							});
					}
				})
				.catch(err => {
					console.log(err);
				});
		},
		// 初始化黑名单分组列表
		async initBlacklistGroupManagement() {
			try {
				const { data } = await getBanGroupList(this.searchData);
				console.log(data);
				this.tableData.tableConent = this.getInterfaceData(data.rows);
				this.searchData.total = data.count;
			} catch (error) {
				console.log(error);
				this.$message.error('获取黑名单分组列表失败！');
			}
		},
		// 分页
		changeGroupPageSize(val) {
			this.searchData.pageSize = val;
			this.searchData.page = 1;
			this.initBlacklistGroupManagement();
		},
		changeGroupCurrentPage(val) {
			this.searchData.page = val;
			this.initBlacklistGroupManagement();
		},
		// 处理接口返回的数据
		getInterfaceData(array) {
			return array.map(item => {
				return {
					createdAt: this.$moment(item.createdAt).format('YYYY-MM-DD HH:mm:ss'),
					groupName: item.title,
					callRejection: item.msg,
					id: item.id,
					updatedAt: this.$moment(item.updatedAt).format('YYYY-MM-DD HH:mm:ss')
				};
			});
		}
	}
};
</script>

<style lang="less" scoped>
.group-management-container {
	.search-group {
		display: flex;
		flex-wrap: wrap;
		width: 90%;
	}
	.add-btn {
		// width: 92px;
		height: 34px;
		background: #6384fe;
		border-radius: 4px;
		line-height: 3px;
		position: absolute;
		top: 44px;
		right: 20px;
		color: #fff;
	}
	.edit-btn {
		border-radius: 4px;
		color: #fff;
		background-color: #6384fe;
	}
	.delete-btn {
		border-radius: 4px;
		color: #fff;
		background-color: #ef5652;
	}
	.page {
		margin-top: 24px;
	}
}
</style>

<style lang="less">
.group-management-container .el-tabs__active-bar {
	background-color: #6384fe !important;
}
.group-management-container .el-tabs__item.is-active {
	font-size: 12px;
	font-family: PingFang SC;
	font-weight: 500;
	color: #6384fe !important;
}
.group-management-container .el-table thead {
	color: #676a6c;
	tr {
		th {
			background-color: #f8f8f9;
		}
	}
}
.group-management-container {
	.table {
		width: 80% !important;
		margin-top: 16px;
	}
}
</style>
